import React, { useContext } from "react";
import { ThemeContext } from "../theme";
import classNames from "classnames";
import { useStyles } from "./styles";

import type { LabelProps } from "./type";

export default function Label({
  style,
  className,
  color,
  outline = false,
  disabled = false,
  text,
  ellipsis,
  children,
  radius,
  onClick,
}: LabelProps) {
  const { fontSize } = useContext(ThemeContext);

  const title = text || String(children);

  const classes = useStyles({
    fontSize,
    disabled,
    radius,
    outline,
    color,
  });

  return (
    <span
      className={classNames(
        classes.label,
        classes.dynamic,
        ellipsis && classes.ellipsis,
        className
      )}
      style={style}
      // data-testid="label"
      title={title}
      onClick={onClick}
    >
      {text ?? children}
    </span>
  );
}
